<template>
  <div>
    <!-- header 头-->
    <van-nav-bar title="申请寄养" left-arrow @click-left="onClickLeft" fixed />
    <!-- 广播 -->
    <van-notice-bar
      left-icon="volume-o"
      text="请使用本人手机号、本人实名认证微信号申请"
    />

    <!-- 定宽 -->
    <div class="pet">
      <!-- 申请伴宠专员的类型 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>申请伴宠专员的类型</span>
      </div>
      <div>
        <van-button class="pet-select" @click="alertMenu">{{
          actionsType
        }}</van-button>
        <van-action-sheet
          v-model="show"
          :actions="actions"
          cancel-text="取消"
          round
          @cancel="toCancel"
          @select="onSelect"
        />
      </div>

      <!-- 上传一张寄养的总览图 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>上传一张寄养的总览图</span>
      </div>
      <!-- <div>
        <van-uploader v-model="fileList" multiple />
      </div> -->

      <el-upload
        class="avatar-uploader"
        action="http://47.106.185.150/api/admin/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="fosterImgUrl" :src="fosterImgUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div slot="tip" class="el-upload__tip">
          <!-- 只能上传jpg/png文件，且不超过500kb -->
        </div>
      </el-upload>

      <!-- 上传一张寄养的阳台图 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>上传一张寄养的阳台图</span>
      </div>
      <!--
      <div>
        <van-uploader v-model="fileList2" multiple />
      </div> -->
      <el-upload
        class="avatar-uploader"
        action="http://47.106.185.150/api/admin/upload"
        :show-file-list="false"
        :on-success="handleBalconySuccess"
      >
        <img
          v-if="fosterBalconyImgUrl"
          :src="fosterBalconyImgUrl"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div slot="tip" class="el-upload__tip">
          <!-- 只能上传jpg/png文件，且不超过500kb -->
        </div>
      </el-upload>

      <!-- 手机号 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>手机号</span>
      </div>
      <input
        v-model="phone"
        class="pet-input"
        type="text"
        placeholder="请输入您的手机号"
        maxlength="11"
      />

      <!-- 微信号 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>微信号</span>
      </div>
      <input
        class="pet-input"
        type="text"
        placeholder="请填写微信号"
        v-model="wechat"
      />

      <!-- 寄养名字 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>寄养名字</span>
        <p class="k">为您的寄养取个具有辨别度的名字吧</p>
      </div>
      <input
        class="pet-input"
        type="text"
        placeholder="寄养名称"
        v-model="fosterName"
      />

      <!-- 同时段可容纳寄养宠物数量上限 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>同时段可容纳寄养宠物数量上限</span>
      </div>
      <input
        class="pet-input"
        type="text"
        placeholder="宠物数量上限"
        v-model="fosterNum"
      />

      <!-- 寄养收费标准 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>寄养收费标准</span>
      </div>
      <input
        class="pet-input"
        type="text"
        placeholder="每只每日价格"
        v-model="fosterPrice"
      />

      <!-- 寄养面积 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>寄养面积</span>
      </div>
      <input
        class="pet-input"
        type="text"
        placeholder="单位：平方米"
        v-model="area"
      />

      <!-- 可提供的宠物用品 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>可提供的宠物房间</span>
      </div>
      <input
        class="pet-input"
        type="text"
        placeholder="可提供的宠物房间,例如一猫一厅"
        v-model="fosterNecessities"
      />

      <!-- 优势表标签 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="" />
        <span>优势标签</span>
        <p class="k">请用最多五个标签体现你的特点及优势，例：地铁周边</p>
      </div>
      <input
        class="pet-input"
        type="text"
        placeholder="优势标签"
        v-model="tag"
      />

      <!--  -->
      <van-button class="pet-next" block @click="submit">下一步</van-button>

      <br />
    </div>
  </div>
</template>

<script>
import { checkNull,checkPhone,checkNum,checkAmt } from "@/utils/checkUtil.js";
export default {
  data() {
    return {
      show: false,
      // 申请寄养
      actions: [
        {
          name: "猫咪寄养",
        },
        {
          name: "狗狗寄养",
        },
        {
          name: "猫咪寄养+狗狗寄养",
        },
      ],
      actionsType: "请选择",
      fosterImgUrl: "",
      fosterBalconyImgUrl: "",
      //验证手机号
      phone: "",
      wechat: "",
      fosterName: "",
      fosterNum: "",
      fosterPrice: "",
      area: "",
      fosterNecessities: "",
      tag: "",
      // msg: '',

      //  上传照片
      // fileList: [],

      // fileList2: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/mine");
    },
    // 验证手机号
    // animate() {
    //   var re =
    //     /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    //   let str = this.phone;
    //   if (!re.test(str)) {
    //     this.$toast("请输入正确的手机号");
    //   }
    // },

    alertMenu() {
      this.show = true;
    },
    onSelect(item) {
      this.show = false;
      this.actionsType = item.name;
    },

    toCancel() {
      console.log("点击了取消");
    },

    //图片上传成功
    handleAvatarSuccess(res, file) {
      this.fosterImgUrl = res.data[0].url;
    },
    handleBalconySuccess(res, file) {
      this.fosterBalconyImgUrl = res.data[0].url;
    },
    submit() {
      let fosterMsg = {
        "type": sessionStorage.setItem('type', this.actionsType),
        "overviewPic": sessionStorage.setItem('overviewPic',  this.fosterImgUrl),
        "previewPic": sessionStorage.setItem('previewPic', this.fosterBalconyImgUrl),
        "phone": sessionStorage.setItem('phone',this.phone),
        "wechat": sessionStorage.setItem('wechat',  this.wechat),
        "fosterCareName": sessionStorage.setItem('fosterCareName', this.fosterName),
        "rates": sessionStorage.setItem('rates', this.fosterPrice),
        "area": sessionStorage.setItem('area', this.area),
        "supplies": sessionStorage.setItem('supplies', this.fosterNecessities),
        "tag": sessionStorage.setItem('tag',  this.tag),

        // "type": this.actionsType,
        // "overviewPic": this.fosterImgUrl,
        // "previewPic": this.fosterBalconyImgUrl,
        // "phone": this.phone,
        // "wechat": this.wechat,
        // "fosterCareName": this.fosterName,
        // "rates": this.fosterPrice,
        // "area": this.area,
        // "supplies": this.fosterNecessities,
        // "tag": this.tag
      }

      // this.axios.post('client/addFosterCare', fosterMsg).then(res => {
      //   console.log(res);
      // })
  

      checkNull(this.actionsType, "请选择版宠专员类型")
        .then(() => checkNull(this.fosterImgUrl, "请上传寄养总览图片"))
        .then(() => checkNull(this.fosterBalconyImgUrl, "请上传阳台图片"))
        .then(() => checkPhone(this.phone, "请输入正确的手机号码"))
        .then(() => checkNull(this.wechat, "请输入微信号"))
        .then(() => checkNull(this.fosterName, "请输入寄养名字"))
        .then(() => checkNum(this.fosterNum, "请输入容纳数量上限"))
        .then(() => checkAmt(this.fosterPrice, "请输入收费标准"))
        .then(() => checkAmt(this.area, "请输入寄养面积"))
        .then(() => checkNull(this.fosterNecessities, "请输入可提供的宠物用品"))
        .then(() => checkNull(this.tag, "请输入优势标签"))
        .then(() => {
          this.$router.push("/Personal");
        })
        .catch((err) => {
          this.$toast(err);
        });
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #d9d9d9;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
<style lang="scss" scoped>
img {
  position: relative;
  top: -0.8vw;
}

::v-deep .van-button {
  color: #999;
  font-size: 12px;
}

::-webkit-input-placeholder {
  /*Webkit browsers*/
  color: #999;
  font-size: 12px;
}

::v-deep .van-icon-arrow-left:before {
  color: #c0c0c0;
}

::v-deep .van-notice-bar {
  background-color: #fff;
}

.pet {
  width: 92%;
  margin: 0 auto;

  .pet-type {
    margin: 20px 0;

    span {
      display: inline-block;
      font-weight: 800;
    }
  }

  .pet-select {
    width: 100%;
    border-radius: 10px;
    background-color: #eeeeee;
    // font-size: 18px;
  }

  .pet-input {
    width: 100%;
    height: 43px;
    display: inline-block;
    background-color: #eeeeee;
    border-radius: 10px;
    text-align: center;
    border: 0px;
    // font-size: 18px;
  }

  .k {
    font-size: 14px;
    color: #c0c0c0;
    margin-top: 10px;
  }

  // 修改默认样式 上传照片
  ::v-deep .van-uploader__upload {
    width: 343px;
    height: 150px;
  }

  .pet-next {
    margin: 40px 0 20px 0;
    border-radius: 20px;
    background-color: #f8e176;
    color: white;
  }
}
</style>